<template>
    <div>
        <el-col :offset="1" :span="22">

            <el-card>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{name}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
            <div style="height: 20px;"/>
            <el-card style="border-top: 4px #ae5172 solid;">
                <div style="height: 5px"/>
                <el-row>
                    <el-col :span="12">
                        <p id="title">{{name}}</p>
                    </el-col>
                    <el-col :span="10">
                        <p @click="collect" style="text-align: right">
                            <i v-if="ifCollect" class="el-icon-star-on"/>
                            <i v-if="!ifCollect" class="el-icon-star-off"/>收藏本贴</p>
                    </el-col>
                </el-row>

                <el-divider/>

                <el-row>
                    <el-col :span="22" :offset="1">
                        <el-table :data="tableData" style="width: 100%" @row-click="openDetails">
                            <el-table-column prop="id" label="序号" width="80"/>
                            <el-table-column prop="title" label="标题" width="300"/>
                            <el-table-column prop="createTime" label="创建时间" width="180"/>
                            <el-table-column prop="" label="其他">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.top == 1">
                                        <el-tag type="danger">置顶</el-tag>
                                        <div style="width: 10px;display:inline-block;"/>
                                    </span>
                                    <span v-if="scope.row.start == 1">
                                        <el-tag type="warning">加精</el-tag>
                                        <div style="width: 10px;display:inline-block;"/>
                                    </span>
                                    <span v-if="scope.row.clock == 1">
                                        <el-tag type="success">锁定</el-tag>
                                        <div style="width: 10px;display:inline-block;"/>
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>

                <div style="height:20px;"/>
                <el-pagination background layout="prev, pager, next"
                               :total="maxPage" @current-change="handleCurrentChange"/>
                <div style="height: 20px;"/>


                <div id="createW" >
                    <div style="height: 30px;"/>
                    <p style="text-align: left;padding-left: 30px">快捷发帖</p>
                    <div style="height: 20px;"/>
                    <p class="endTitle">标题</p>
                    <el-input v-model="newCommentTitle" placeholder="请输入标题" style="width: 300px;display:inline-block;"/>
                    <div style="width: 500px;display:inline-block;"/>
                    <div style="height: 30px;"/>

                    <div style="padding-left: 30px;padding-right: 30px;">
                        <el-input
                                type="textarea"
                                placeholder="请输入内容"
                                v-model="newCommentContent"
                                maxlength="150"
                                :rows="10"
                                show-word-limit
                        />
                    </div>
                    <div style="height: 30px"/>

                    <el-button @click="remove" type="info">清除</el-button>
                    <el-button :disabled="havaPower" @click="createComment" type="success">发布</el-button>
                    <div style="height: 30px"/>
                </div>





            </el-card>
            <div style="height: 50px;"/>
        </el-col>





        <el-dialog title="发布新帖" :visible.sync="createCommentWindows" width="60%" >
            <el-input v-model="newCommentTitle" placeholder="请输入标题" style="height: 50px"/>
            <el-input type="textarea" placeholder="请输入内容" v-model="newCommentContent" maxlength="100" show-word-limit/>
            <div style="height: 80px;"/>
            <!-- 更新按钮 -->
            <el-button @click="createComment"  type="success">发布</el-button>
            <!-- 取消 -->
            <el-button @click="createCommentWindows = false" >取消</el-button>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        created() {
            var myPower = localStorage.getItem('power');
            if(myPower == 0){
                this.havePower = false;
            }
            // 从 url 中获取板块 id
            this.plateId = this.$route.query.id;
            console.log(this.plateId);
            // 获取是否收藏
            this.$axios
                .get("/api/collect/getIfCollectByUserIdAndStateAndTypeId",{
                    params:{
                        typeId:this.plateId,
                        state:'1'
                    }
                })
                .then(req=>{
                    if(req.data.success){
                        this.ifCollect = !this.ifCollect;
                    }
                })
            // 根据板块 id 获得帖子的数量
            this.$axios
                .get("/api/posts/getLong",{
                    params:{
                        plateId:this.plateId
                    }
                })
                .then(req=>{
                    this.maxPage = req.data.data;
                })
            // 根据板块 id 获得板块相关信息
            this.$axios
                .get("/api/plate/getById",{
                    params:{
                        id:this.plateId
                    }
                })
                .then(req=>{
                    const tmp = req.data.data;
                    this.name = tmp.name;
                })
            // 根据板块 id 获取第一页数据
            this.$axios
                .get("/api/posts/getPostsByStatePagePlateId",{
                    params:{
                        state:'0',
                        plateId:this.plateId,
                        page:'1'
                    }
                })
                .then(req=>{
                    const tmp = req.data.data;
                    this.tableData = tmp;
                })
        },
        name: "showPlate",
        data(){
            return{
                havaPower:true,
                ifCollect:false,
                newCommentTitle:'',
                newCommentContent:'',
                createCommentWindows:false,
                plateId:'',
                name:'板块名称',
                page:'1',
                maxPage:'1',
                tableData:[{
                    id:'1',
                    title:'1',
                    createTime:'',
                    start:false,
                    top:false,
                    clock:false
                }]
            }
        },
        methods:{
            createComment:function(){
                this.$axios
                    .post("/api/posts/createPosts",{
                        plateId: this.plateId,
                        title: this.newCommentTitle,
                        comment: this.newCommentContent
                    })
                    .then(req=>{
                        this.$message.warning("帖子已交由管理员审核");
                        this.newCommentContent = '';
                        this.newCommentTitle = '';
                    })
                this.createCommentWindows = false;
            },
            // 清除
            remove:function(){
                this.newCommentContent = '';
                this.newCommentTitle = '';
            },
            // 分页请求
            handleCurrentChange(val){
                this.$axios
                    .get("/api/posts/getPostsByStatePagePlateId",{
                        params:{
                            state:'0',
                            plateId:this.plateId,
                            page:val
                        }
                    })
                    .then(req=>{
                        const tmp = req.data.data;
                        this.tableData = tmp;
                    })

            },
            // 跳转到具体内容
            openDetails(row){
                console.log(row.id);
                this.$router.push("/posts?id="+row.id);
            },
            goHome:function () {
                this.$router.push("/home")
            },
            leftB:function() {
                this.page = this.page - 1;
                this.getData();
            },
            rightB:function() {
                this.page = Number(this.page) + Number(1);
                this.getData();
            },
            collect:function () {
                this.$axios.get("/api/collect/addByStateAndTypeId",{
                    params:{
                        state:"1",
                        typeId:this.plateId
                    }
                })
                .then(req=>{
                    this.$message.success("收藏完成");
                    this.ifCollect = !this.ifCollect;
                })
            }

        }
    }
</script>

<style scoped>
    #createW{
        height: auto;
        width: 100%;
        background-color: #eaeaea;
    }
    #title{
        font-size: 30px;
        text-align: left;
        padding-left: 10px;
    }
    #end{
        font-size: 20px;
    }
    .borderRight{
        border-right: 10px;
    }
    .endTitle{
        text-align: left;
        display:inline-block;
        padding-right: 10px;
        padding-left: 30px;
    }
</style>
